<!--
 * @Author: your name
 * @Date: 2022-03-21 21:41:26
 * @LastEditTime: 2022-03-23 19:21:02
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \vue_xiaoqi\src\components\MyList.vue
-->
<template>
<table class="mytable">
    <tr class="mytr">
      <label><td class="mytd6">
  <input type="checkbox" @click="IsAll" value="false">全选
  <button @click="clear">清除</button>
  已选{{xxx1.length}}/全部{{NewMessages.length}}
  </td></label>
 
    <td class="mytd1">编号</td>
      <td class="mytd2">日期</td>
      <td class="mytd3">作者</td>
      <td class="mytd3">评分</td>
      <td class="mytd3">状态</td>
      <td class="mytd4">标题</td>
      <td class="mytd5">行为</td>
      
    </tr>
   <TotsList  v-for="message in NewMessages" :key="message.id" :message='message' :messages='messages'></TotsList>
 
  </table>
</template>

<script>

import TotsList from './TotsList.vue'
export default {
    name:'VueMyList',
 data() {
   return { 
      messages:[
            {id:'1',
            date:Date(),
            name:'小米粥',
            evaluate :'⭐⭐⭐',
            state:'draft',
            title:'《众嗦粥汁》',
            done:false,
            edit:false}
        ],
  nnn:'',
  d:1
    }
   },
  
components:{
  TotsList
},
  mounted(){
       this.$bus.$on('Add1',(Add1)=>{
           this.messages.push(Add1)
       });
     this.$bus.$on('ccc',(id)=>{
    if(window.confirm('确定删除')){
       return this.messages=this.messages.filter((message)=>{
         return message.id.indexOf(id)==-1
       })
    }
       
     });
     this.$bus.$on('ttt',(name)=>{
     this.nnn=name
     
       
     });
     this.$bus.$on('yyy',(name)=>{
      this.nnn=name
     });
     
  
    
   },
   computed:{
      // 全部
 NewMessages(){
  return this.messages.filter((message)=>{
    return message.name.indexOf(this.nnn)!==-1
   

  })
  
 },
            // 已选择
  xxx1(){
       return this.NewMessages.filter((message)=>{
return message.done===true
         })
     }
   },
   methods:{
    //  全选
      IsAll(){
 if(this.d%2!=0){
       this.NewMessages.forEach((message)=>{
message.done=true
     })
     this.d++
 }else{
   this.messages.forEach((message)=>{
message.done=false
 }
    ) 
     this.d++}
   
   },
  //  清除
   clear(){
  if(window.confirm('确定删除？')){
    return this.messages=this.messages.filter((message)=>{
    return message.done==false
  })
  }

   }
  
}
}
</script>

<style>
.mytr{
  width: 1500px;
  height: 40px;
}
td{
  font-size: 12px;
  border: 1px solid #D3D5D8;
  height: 40px;
}
.mytr2:hover{
 background-color: darkgray;
}
.mytd1{
  width: 80px;
  text-align: center;
  line-height: 40px;
   height: 40px;
}
.mytd2{
  width: 200px;
   text-align: center;
   line-height: 40px;
    height: 40px;
}
.mytd3{
  width: 100px;
   text-align: center;
   line-height: 40px;
    height: 40px;
}
.mytd4{
  width: 970px;
  line-height: 40px;
   height: 40px;
}
.mytd5{
   text-align: center;
  width: 150px;
  line-height: 40px;
   height: 40px;
}
.mytd6{
  float: left;
   text-align: center;
  width: 250px;
  height: 40px;
  line-height: 40px;
}
</style>